<template>
    <div class="auto-1632336254536 m-layer z-show m-layer-w2" style="top: 102px; left: 400px;" v-if="createdFlag" ref="scbox">
       <div class="zbar" @mousedown="move">
          <div class="zttl f-thide">新建歌单</div>
       </div>
       <div class="zcnt">
         <div class="lyct m-crgd f-cb f-tc">
             <p>歌单名： <input type="text" class="u-txt j-flag" id="auto-id-skuSDIIdmxRr5LBu" v-model.trim="Text"></p>
             <div class="u-err j-flag" v-show="warning">
                <i class="u-icn u-icn-25"></i>
                {{warning}}
             </div>
             <p class="tip s-fc4">可通过“收藏”将音乐添加到新歌单中</p>
             <div class="btn">
               <a href="JavaScript:;" class="u-btn2 u-btn2-2 u-btn2-w2 j-flag" @click.stop="created"><i>新 建</i></a>
                 <a href="JavaScript:;" class="u-btn2 u-btn2-1 u-btn2-w2 j-flag" @click.stop="close"><i>取 消</i></a>
             </div>
         </div>
         <span class="zcls" title="关闭窗体" id="auto-id-Ke3aLywwx0b883rh" @click.stop="close">×</span>
       </div> 
    </div>
</template>
<script>
import {playlist_create} from './../../network/song'
export default {
    data() {
        return {
           createdFlag : false ,
           Text:null,
           warning:null,
           fun:null
        }
    },
    methods:{
     isshow(fun){
         //展开
         this.createdFlag = true
         this.fun = fun
     },
     close(){
         //关闭
         this.createdFlag = false
     },
     move(e) {
      //拖动整个收藏栏
        var x = e.pageX - this.$refs.scbox.offsetLeft;
        var y = e.pageY - this.$refs.scbox.offsetTop;
        var _this = this;
        document.addEventListener("mousemove", Boxmove);
        function Boxmove(e) {
            _this.$refs.scbox.style.left = e.pageX - x + "px";
            _this.$refs.scbox.style.top = e.pageY - y + "px";
        }
        document.addEventListener("mouseup", function () {
            document.removeEventListener("mousemove", Boxmove);
        });
    },
    created(){
        if(!this.Text){
          this.warning = "歌单名不能为空"
        }else{
          this.warning = null
          playlist_create(this.Text , 'NORMAL').then(res =>{
              this.fun(res.data.playlist)
            this.createdFlag = false
          })
        }
        
    }
    }
}
</script>

<style scoped>
div.m-layer-w2 {
    width: 480px;
}
div.m-layer {
    position: absolute;
    z-index: 9998;
    width: 530px;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
    border: none;
}
.auto-1632336254536 {
    background: #fff;
}
div.m-layer .zbar {
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    background: #2d2d2d;
}
div.m-layer .zbar, div.m-layer .zttl {
    cursor: move;
    user-select: none;
}
.auto-1632336254536 .zbar {
    line-height: 30px;
}
.auto-1632336254536 .zttl {
    text-align: left;
}
div.m-layer .zttl {
    padding-right: 45px;
    margin: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 18px;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    background-position: 50% 0;
}
div.m-layer div.zcnt {
    padding: 0;
    border: 1px solid #878787;
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
}
div.m-layer .lyct {
    padding: 40px 0;
}
.m-crgd {
    margin-left: 30px;
    text-align: left;
}
.f-cb::after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}
.m-crgd .u-txt {
    vertical-align: middle;
    width: 330px;
}
.u-txt {
    height: 19px;
    margin: 0;
    padding: 5px 6px 6px;
    border: 1px solid #cdcdcd;
    border-radius: 2px;
    line-height: 19px;
    box-sizing: content-box;
}
.u-err {
    height: 17px;
    margin-top: 5px;
    line-height: 17px;
    color: #e33232;
}
.u-err i {
    margin-right: 8px;
}
.u-icn, .u-icn2, .u-icn3 {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.u-icn-25 {
    width: 14px;
    height: 14px;
    background: url("./../../assets/imgs/icon.png") no-repeat;
    background-position: -50px -270px;
}
.m-crgd .tip {
    margin: 8px 0 20px 48px;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
.m-crgd .btn, .m-crgd .u-err {
    margin-left: 48px;
}
.u-btn2, .u-btn2 i {
    display: inline-block;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
}
.u-btn2, .u-btn2 i{
    background: url("./../../assets/imgs/button2.png") no-repeat;
}
.u-btn2-2 {
    color: #fff;
    background-position: right -428px;
}
.u-btn2-2 i {
    color: #fff;
    background-position: 0 -387px;
}
.u-btn2, .u-btn2:hover {
    text-decoration: none;
}
.u-btn2 {
    padding: 0 5px 0 0;
    white-space: nowrap;
}
.u-btn2-w2 i {
    width: 40px;
}
.u-btn2 i {
    padding: 0 15px 0 20px;
    pointer-events: none;
}
.m-crgd .u-btn2-1 {
    margin-left: 20px;
}
.u-btn2-1 {
    color: #333;
    background-position: right -100px;
}
.u-btn2-1 i {
    color: #333;
    background-position: 0 -59px;
}
div.m-layer .zcls {
    position: absolute;
    z-index: 20;
    top: 16px;
    right: 20px;
    width: 10px;
    height: 10px;
    overflow: hidden;
    text-indent: -9999px;
    cursor: pointer;
    background: url("https://s2.music.126.net/style/web2/img/layer/layer.png?7056dfe067cc29648b31a941518c4c74") no-repeat;
    background-position: 0 -95px;
}
</style>